<template>
    <div-row :obj="obj" class="NavBar">
        <div class="logo">
            <img :src="obj.image" alt="">
        </div>
        <el-menu
            class="nav-menu"
            :style="{paddingLeft: obj.paddingMenuLeft+'px'}"
            :default-active="activeIndex"
            :background-color="obj.backgroundColor"
            :text-color="obj.textColor"
            :active-text-color="obj.activeColor"
            mode="horizontal">
            <template v-for="(menu, index) in obj.imgTextBox">
                <el-submenu v-if="menu.is_group == true" :key="index" :index="menu.httpUrl">
                    <template slot="title">
                        <div slot="title" v-html="menu.title"/>
                    </template>
                    <template v-for="(menuitem, s) in menu.children">
                        <template v-if="menuitem.is_group == true">
                            <el-submenu :index="s" :key="menuitem.httpUrl">
                                <template slot="title">
                                    <div slot="title" v-html="menuitem.title"/>
                                </template>
                                <template v-for="(menuitemChild, c) in menuitem.children">
                                    <el-menu-item :index="menuitemChild.httpUrl" :key="c">
                                        <div slot="title" v-html="menuitemChild.title"/>
                                    </el-menu-item>
                                </template>
                            </el-submenu>
                        </template>
                        <el-menu-item v-else :index="menuitem.httpUrl" :key="s">
                            <div slot="title" v-html="menuitem.title"/>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item v-else :index="menu.httpUrl" :key="index">
                    <div slot="title" v-html="menu.title"/>
                </el-menu-item>
            </template>
        </el-menu>
    </div-row>
</template>
<script>

export default {
    title: 'NavBar',
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            activeIndex: ''
        }
    }
}
</script>
<style lang="scss" scoped>
    .NavBar{
        position: relative;
        .logo{
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translate(0,-50%);
            z-index: 9999;
            width: 220px;
            padding: 0px 0 5px 20px;
            overflow: hidden;
            height: 55px;
            img{
                max-width: 100%;
            }
        }
        .nav-menu{
            padding-left: 220px;
        }
    }
</style>

